<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="card-search">
      <el-row type="flex">
        <el-form ref="form" :inline="true" :model="pageConfig" label-width="80px" class="form">
          <el-form-item label="订单编号:">
            <el-input
              v-model="orderNo.orderNo"
              class="inputSearch"
              @input="focusInp"
              @focus="focusInput"
              @blur="blurInp"
            >
              <i slot="suffix" :class="{'el-input__icon el-icon-circle-close':inpFocus}" @click="emptyInp" />
            </el-input>
          </el-form-item>
          <el-form-item label="选择日期:">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="CXButton" @click="searchOrder">
              <i class="el-icon-search" />搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-card>
      <!-- 表格表单 -->
      <el-table
        :data="orderTable"
        style="width: 100% "
        stripe
        :row-style="{height: '10'}"
        :cell-style="{padding: '10'}"
        :header-cell-style="{color:'#000',background:'#f3f6fb'}"
      >
        <el-table-column
          label="序号"
          width="100"
          align="center"
        >
          <template v-slot="{$index}">
            {{ $index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="180"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
          width="180"
        />
        <el-table-column
          prop="price"
          label="订单金额"
          width="120"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="180"
        />
        <el-table-column
          prop="status"
          label="订单状态"
          width="150"
        >
          <template v-slot="{row}">
            {{ makeStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="订单日期"
          width="180"
        >
          <template v-slot="{row}">
            {{ makeTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="{row}">
            <el-button type="text" @click="showDetail(row.orderNo)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 更换页面 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next ,jumper"
          :total="+total"
          :current-page="pageConfig.pageIndex"
          :page-size="pageConfig.pageSize"
          background
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <el-dialog title="查看详情" :visible="isShowDialog" width="40%" @close="btnCancel">
      <el-form type="flex">
        <el-row class="bgc">
          <el-col :span="2"><img :src="img" alt=""></el-col>
          <el-col :span="16"><span>{{ makeStatus(detailInfo.status) }}</span></el-col>
          <el-col :span="6"><img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt=""></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：">
              <span>{{ detailInfo.orderNo }}</span>
            </el-form-item>
            <el-form-item label="设备编号：">
              <span>{{ detailInfo.innerCode }}</span>
            </el-form-item>
            <el-form-item label="完成时间：">
              <span>{{ makeTime(detailInfo.updateTime) }}</span>
            </el-form-item>
            <el-form-item label="设备地址：">
              <span>{{ makeAddr(detailInfo.addr) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称：">
              <span>{{ detailInfo.skuName }}</span>
            </el-form-item>
            <el-form-item label="订单金额：">
              <span>{{ detailInfo.price }}</span>
            </el-form-item>
            <el-form-item label="创建时间：">
              <span>{{ makeTime(detailInfo.createTime) }}</span>
            </el-form-item>
            <el-form-item label="支付方式：">
              <span>{{ payType() }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderAPI } from '@/api/order'
// import formatDate from '@/filters'
export default {
  data() {
    return {
      // orderForm: {
      //   orderNo: '',
      //   skuName: '',
      //   price: '',
      //   innerCode: '',
      //   status: '',
      //   createTime: ''
      // },
      orderTable: [],
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      id: '',
      orderNo: {
        orderNo: '',
        startDate: '',
        endDate: ''
      },
      date: [],
      total: 0,
      // 控制一键删除搜索框内容
      inpFocus: false,
      // 控制弹框
      isShowDialog: false,
      detailInfo: {
        updateTime: '',
        addr: '',
        createTime: '',
        status: ''
      },
      img: ''
    }
  },
  created() {
    this.getOrder()
  },
  methods: {
    // 搜索订单
    async searchOrder() {
      if (this.date === null || this.date.length === 0) {
        this.orderNo.startDate = ''
        this.orderNo.endDate = ''
      } else {
        console.log(1)
        this.orderNo.startDate = this.newDate(this.date[0])
        this.orderNo.endDate = this.newDate(this.date[1])
      }
      // console.log(!this.pageConfig.orderNo && this.date === {})
      if (!this.orderNo.orderNo && this.date === null) {
        console.log(1)
        this.getOrder()
      } else {
        const { data } = await getOrderAPI({ ...this.pageConfig, ...this.orderNo })
        this.orderTable = data.currentPageRecords
        this.total = data.totalCount
      }
    },
    // 清空 Input框
    emptyInp() {
      this.orderNo.orderNo = ''
    },
    // 输入内容时聚焦input框
    focusInp() {
      if (this.orderNo.orderNo) {
        this.inpFocus = true
      }
    },
    // 聚焦input框时，若有内容显示x
    focusInput() {
      if (this.orderNo.orderNo) {
        this.inpFocus = true
      }
    },
    // 失焦input框
    blurInp() {
      setTimeout(() => {
        this.inpFocus = false
      }, 200)
    },
    // 获取order订单
    async getOrder() {
      const res = await getOrderAPI(this.pageConfig)
      // console.log(res)
      this.orderTable = res.data.currentPageRecords
      this.total = res.data.totalCount
    },
    // 下一页
    currentChange(newPage) {
      this.pageConfig.pageIndex = newPage
      this.getOrder()
    },
    // 处理订单状态
    makeStatus(status) {
      if (status === 1) {
        return '待出货'
      } else if (status === 2) {
        return '出货成功'
      }
    },
    // 处理时间
    makeTime(time) {
      return time.replace('T', ' ')
    },
    // 展示弹框，回显数据
    async showDetail(id) {
      setTimeout(() => {
        this.isShowDialog = true
      }, 200)
      this.id = id
      const res = await getOrderAPI({ ...this.pageConfig, orderNo: this.id })
      this.detailInfo = res.data.currentPageRecords[0]
    },
    // 处理地址
    makeAddr(addr) {
      const str = addr.split('-')
      return str[3]
    },
    // 处理支付方式
    payType() {
      if (this.detailInfo.payType === '1') {
        return '支付宝支付'
      } else if (this.detailInfo.payType === '2') {
        return '微信支付'
      }
    },
    // 关闭弹框
    btnCancel() {
      this.isShowDialog = false
      this.detailInfo = {
        updateTime: '',
        addr: '',
        createTime: ''
      }
    },
    // 转化成年月日
    newDate(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    }

  }
}
</script>

<style lang="scss" scoped>
.search{
width: 100%;

.searchButton{
  margin-left:-80px;
}
}
 .inputSearch{
  width:300px
}

.card-search {
  width: 100%;
    margin: 10px;
    .CXButton {
    margin-left:10px ;
}
  }
.bgc{
      display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 54px;
    margin-bottom: 30px;
    padding-left: 10px;
  background-color: #f8f8f8;
}
</style>
